<template>
  <div>
    <el-form :inline="true">
      <el-select v-model="searchInfo" placeholder="按订单号查询">
        <el-option label="按ID查询" value="id"></el-option>
        <el-option label="按商品名称查询" value="name"></el-option>
      </el-select>
      <el-form-item>
        <el-input placeholder="订单号" v-model="index"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addGoods">添加商品</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%" border>
      <el-table-column prop="id" label="id" width="60"> </el-table-column>
      <el-table-column label="商品信息" width="400">
        <template slot-scope="scope">
          {{ scope.row.name }}
          <br />
          <br />
          {{ scope.row.subtitle }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">
            已下架
            <el-button size="mini" @click="up(scope.row.id)">上架</el-button>
          </span>
          <span v-else>
            在售
            <el-button size="mini" @click="down(scope.row.id)">下架</el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="{ path: '/goodsDetails?id=' + scope.row.id }">
            <el-tag type="info">查看</el-tag>
          </router-link>
          <router-link :to="'/goodsEdit/' + scope.row.id">
            <el-tag type="info">编辑</el-tag>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" @num="handleCurrentChange"></pagination>
  </div>
</template>
<script>
// 分页
import pagination from "../component/pagination";
//接口
import {
  goods_list,
  goods_status,
  goods_search,
  goods_detail,
} from "@/api/api";
export default {
  name: "",
  components: { pagination },
  props: [],
  data() {
    return {
      pageNum: 1,
      total: 0,
      list: [],
      searchInfo: "",
      index: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    //   获取数据
    async getList() {
      const { data: res } = await goods_list(
        `/api/product/list.do?pageNum=${this.pageNum}`
      );
      this.total = res.data.total;
      this.list = res.data.list;
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.index !== "") {
        this.user("productName");
      } else {
        this.getList();
      }
    },
    // 上架
    async up(id) {
      const { data: res } = await goods_status(
        `/api/product/set_sale_status.do?productId=${id}&status=2`
      );
      this.$message.success(res.data);
      this.getList();
    },
    // 下架
    async down(id) {
      const { data: res } = await goods_status(
        `/api/product/set_sale_status.do?productId=${id}&status=1`
      );
      this.$message.success(res.data);
      this.getList();
    },
    // 搜索
    search() {
      if (this.searchInfo == "id") {
        this.user("productId");
      } else if (this.searchInfo == "name") {
        this.user("productName");
      } else {
        this.$message.error("请选择查询方式");
      }
    },
    // 搜索接口
    async user(data,) {
      const { data: res } = await goods_search(
        `/api/product/search.do?listType=search&pageNum=${this.pageNum}&${data}=${this.index}`
      );
      this.total = res.data.total;
      this.list = res.data.list;
    },
    addGoods() {
      this.$router.push("/goodsAdd");
    },
  },
};
</script>
<style scoped>
</style>